<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>裁切图片</title>
	<link rel="stylesheet" href="../../css/index.css">
</head>
<style>
html,body{ width:100%; height:100%; background:#222;}
#wrap{ height:100%;flex-direction:column;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
#header{background-color:rgba(0,0,0,0);}
#content{ background-color: #555;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
#footer{ background-color: #222;}

.bntbox{ padding: 10px;}
.bntbox .btn{line-height:35px;border-radius:5px;background:#888;border:1px solid #CCC;color:#fff;text-align:center;font-size:16px;}
.bntbox .btn.ok{background:#FF2741;border-color:#FF2741;margin-left:15px;}

</style>
</head>
<body>
<div id="wrap" class="flex">
	<div id="header"></div>
	<div id="content"></div>
	<div id="footer">
		<div class="flex bntbox">
			<div class="btn flex1" tapmode onclick="cancel_click()" set-lan="html:store_cnt4">取消</div>
			<div class="btn flex1 ok" tapmode onclick="ok_click()" set-lan="html:shop_done">裁切</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script>
var param = null;
var FNImageClip = null;
// lanYun.pageHeader('header');
// lanYun.pageFooter('footer');
apiready = function() {
	param = api.pageParam;
	if(!param.img){
		api.toast({msg:'请先选择一张图片!',location: 'middle'});
		return false;
	}
	var conH = document.getElementById('content').offsetHeight;
	var width = api.winWidth - param.wge;
	var cliph = width * param.bili;

	FNImageClip = api.require('FNImageClip');
	FNImageClip.open({
		mode:'image', // clip image all
		rect: {
			x: 0,
			y: lanYun.top,
			w: api.winWidth,
			h: conH
		},
		srcPath: param.img,
		style: {
			mask: 'rgba(0,0,0,.7)',
			clip: {
				w: width,
				h: cliph,
				x: (api.winWidth - width) / 2,
				y: (conH - cliph) / 2,
				borderColor: '#fff',
				borderWidth: 1,
				appearance: 'rectangle'
			}
		},
		fixedOn: api.frameName
	}, function(ret, err) {

	});
};

function ok_click(){
	FNImageClip.save({
	    destPath: 'fs://imageClip/avatar.png',
	    copyToAlbum: false,
	    quality: param.qua
	}, function(ret, err) {
	    if (ret && ret.destPath) {
	    	api.execScript({
			    name: param.frm+'_win',
			    frameName: param.frm,
			    script: 'caiqieCallBack("'+ret.destPath+'")'
			});
			//api.sendEvent({name: api.frameName,extra: {type:'avatar',path:ret.destPath}});
	    }
		cancel_click();
	});
}

function cancel_click(){
	FNImageClip.close();
	api.closeFrame();
}
</script>
</body>
</html>
